import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { Button, Col, Form, Input, Row, Select, theme, Divider, Radio, Table, Space, Tag, Checkbox, Pagination, Switch, message } from 'antd';
import React, { useState, useEffect } from 'react';
import http from '../../../utils/fetchHttp'


const { Option } = Select;// ---表单的内容

// ----以下是表格
// 表格
const TableDetail = () => {
    const columns = [
        { title: '序号', dataIndex: 'index', key: 'index', render: (text, record, index) => index + 1 },
        {
            title: '分类ID',
            dataIndex: 'classifyID',
            key: 'classifyID',
        },
        {
            title: '分类名称',
            dataIndex: 'classifyName',

        },
        {
            title: '分类图标',
            dataIndex: 'classifyImg',

        },
        {
            title: '分类级别',
            dataIndex: 'classifyClass',

        },
        {
            title: '上级ID',
            dataIndex: 'classifyParentID',

        },
        {
            title: '分类描述',
            dataIndex: 'classifyDescribe',
        },
        {
            title: '设置',
            align: 'center',
            render: (_, record) => (<Space size="middle">
                <a href="#">新增下级</a>
                <a href="#">查看下级</a>
            </Space>),
        },
        {
            title: '操作',
            align: 'center',
            render: (_, record) => (<Space size="middle">
                <a href="#">编辑</a>
                <a href="#">删除</a>
            </Space>),
        },
    ];
    //全局提示
    const [messageApi, contextHolder] = message.useMessage();

    const [dataList, setDataList] = useState([]); //表格数据

    //1、获取到所有学生的数据
    useEffect(() => {
        getStu()
    }, [])

    //获取数据
    const getStu = () => {
        http({
            url: '/product/getClassify',
            method: 'get'
        }).then(res => {
           if (res.code === 200) {
                //获取成功
                // res.data
                message.success(res.msg);
                setDataList(res.data)
            }
        }).catch(err => {
            message.error('获取所有分类数据失败！');
        })
    }
    // 选择的数组
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record) => ({
            disabled: record.name === 'Disabled User',
            // Column configuration not to be checked
            name: record.name,
        }),
    };

    return (
        <Table rowSelection={{
            type: 'checkbox',
            ...rowSelection,
        }} columns={columns} dataSource={dataList}
            pagination={{
                pageSize: 5
            }}
            rowKey={record => record.classifyID} />
    )
};

const App = () => {
    const { token } = theme.useToken();
    const listStyle = {
        textAlign: 'center',
        background: token.colorFillAlter,
        borderRadius: token.borderRadiusLG,
        marginTop: 16,
    };
    const handleChange = (value) => {
        console.log(`selected ${value}`);
    };
    const [selectionType, setSelectionType] = useState('checkbox');
    return (
        <div>
            <div style={listStyle}>
                <div style={{ lineHeight: '2rem', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', height: '2rem', padding: '1rem' }}>
                    <h3>数据列表</h3>
                    <div>
                        <Select
                            defaultValue="批量操作"
                            onChange={handleChange}
                            options={[
                                { value: 'jack', label: '批量删除' },
                            ]}
                        />
                        <span> </span>
                        <Radio.Button value="default">添加</Radio.Button>
                    </div>
                </div>

                <div style={{ lineHeight: '20rem', }}>
                    <Divider />
                    <TableDetail />
                </div>

            </div>
        </div>
    );
};
export default App;